<template>
  <div id="home">
    <nar-bar>
      <!--    <div slot="left" class="left">左边</div>-->
      <div slot="center" class="center">购物街</div>
      <!--    <div slot="right" class="right">右边</div>-->
    </nar-bar>
    <BScroll class="content"
             ref="scroll"
             @pullingup="more">
      <swiper-item :images="banner">   <!--轮播图-->

      </swiper-item>
      <recommend-view :recommends="recommend"/>  <!--推荐商品-->
      <feature-view></feature-view>
      <tab-control :titles="['流行','新款','精选']" @tabClick="tabClick"></tab-control>
      <goods-list :goods="goods[currenIndex].list"/>       <!--关于流行，精选，新款的展示组件-->
    </BScroll>
    <back-top @click.native="backclick"></back-top>
  </div>

</template>

<script>
import NarBar from "components/common/navbar/NarBar";
import {getHomeMultidata, getHomeGoods} from "@/network/home";
import SwiperItem from "@/components/common/swiper/SwiperItem";
import RecommendView from "@/view/home/ChildComponents/RecommendView";
import FeatureView from "@/view/home/ChildComponents/FeatureView";
import TabControl from "@/components/content/TabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import BScroll from "@/components/common/scroll/BScroll";
import BackTop from "@/components/common/BckTop/BackTop";
import Scroll from "@/components/common/scroll/Scroll";

export default {
  name: "Home",
  data() {
    return {
      banner: [],
      recommend: [],
      goods: {
        'pop': {page: 0, list: []},
        'new': {page: 0, list: []},
        'sell': {page: 0, list: []},
      },
      currenIndex: 'pop',
      imagesload: null
    }
  },
  components: {
    NarBar,
    SwiperItem,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList,
    BScroll,
    BackTop,
    Scroll

  },
  deactivated() {
    this.$bus.$off('itemImageLoad', this.imagesload)
  },
  created() {
    this.getHomeMultidata()
    this.getHomeGoods('pop',)
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  mounted() {

    const refresh = this.debounce(this.$refs.scroll.refresh, 50)
    this.$bus.$on('itemImageLoad', () => {
      refresh()
    })

  },
  // destroyed() {
  //   console.log('被销毁了');
  // },
  methods: {
    tabClick(index) {
      switch (index) {
        case 0:
          this.currenIndex = 'pop'
          break
        case 1:
          this.currenIndex = 'new'
          break
        case 2:
          this.currenIndex = 'sell'
      }
    },


    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banner = res.data.banner.list;
        this.recommend = res.data.recommend.list;
        // console.log(this.banner);
        // console.log(this.recommend);
      })
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page + 1
        // console.log(res.data.list);
      })
    },

    backclick() {
      // this.$refs.back.scroll.scrollTo(0,0);
      this.$refs.scroll.scrollTo(0, 0, 600)
    },
    more() {
      console.log('上拉加载更多');
      this.getHomeGoods(this.currenIndex)
    },
    debounce(func, delay) {   //防抖函数
      let timer = null
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args)
        }, delay)
      }
    },
  },

}
</script>


<style scoped>

#home {
  height: 100vh;
  position: relative;
}

.content {
  height: calc(100% - 93px);
  overflow: auto;
}

</style>